import React, { useState, useEffect } from "react";
import { Form, Input, Button, Checkbox } from "antd";
import {
  UserOutlined,
  LockOutlined,
  TranslationOutlined,
} from "@ant-design/icons";

import { withRouter } from "react-router-dom";
//组件使用
function LogoIn(props) {
  const [form] = Form.useForm();
  const [username, setUsername] = useState("");
  const [password, setPassWord] = useState("");
  const [disabledflag, setdisableflag] = useState(true);
  const onFinish = (values) => {
    console.log("Received values of form: ", values);
    let result = [
      {
        name: "首页",
        url: "/admin/home",
      },
    ];
    sessionStorage.setItem("urldata", JSON.stringify(result));
    sessionStorage.setItem("urlindex", 0); //设置活跃的Tabindex
    props.history.push({ pathname: "/admin/home" });
  };
  //验证用户名函数
  function validateUserName(rule, value) {
    if (value) {
      if (value !== "admin") {
        setUsername({
          validateStatus: "error",
          errorMsg: "用户名必须是admin",
        });
      } else {
        setUsername({
          validateStatus: "success",
          errorMsg: null,
        });
      }
    } else {
      setUsername({
        validateStatus: "error",
        errorMsg: "用户名不能为空",
      });
    }
  }

  //验证密码函数
  function validatePassWord(rule, value) {
    if (value) {
      if (value !== "123") {
        setPassWord({
          validateStatus: "error",
          errorMsg: "密码只能是123",
        });
      } else {
        setPassWord({
          validateStatus: "success",
          errorMsg: null,
        });
      }
    } else {
      setPassWord({
        validateStatus: "error",
        errorMsg: "密码不能为空",
      });
    }
  }
  //失去焦点
  function handlelostfocus() {
    //不能判断error 只能判断success
    if (
      username.validateStatus === "success" &&
      password.validateStatus === "success"
    ) {
      setdisableflag(false);
    } else {
      setdisableflag(true);
    }
  }
  //监听改变
  useEffect(() => {
    handlelostfocus();
  }, [username, password]);
  return (
    <div
      style={{
        position: "relative",
        top: "0px",
        left: "0px",
        width: "100vw",
        height: "100vh",
        background: "#001529",
      }}
    >
      <div
        style={{
          position: "absolute",
          top: "40%",
          left: "50%",
          color: "#ffe493",
          fontSize: "32px",
          width: "650px",
          height: "600px",
          padding: "30px 30px",
          marginLeft: "-325px",
          marginTop: "-150px",
        }}
      >
        <span>雾烟云React全家桶以及HOOKS总结系统</span>

        <div
          style={{
            position: "absolute",
            top: "50%",
            left: "50%",
            background: "white",
            boxShadow: "0px 0px 30px #ffe493",
            border: "1px solid #ffe493",
            width: "300px",
            height: "300px",
            padding: "30px 30px",
            marginLeft: "-150px",
            marginTop: "-150px",
          }}
        >
          <Form
            name="normal_login"
            initialValues={{
              remember: true,
            }}
            onFinish={onFinish}
            form={form}
          >
            <Form.Item
              name="username"
              rules={[
                {
                  validator: async (rule, value) => {
                    validateUserName(rule, value);
                  },
                },
              ]}
              help={username.errorMsg}
              validateStatus={username.validateStatus}
            >
              <Input
                prefix={<UserOutlined className="site-form-item-icon" />}
                placeholder="用户名"
              />
            </Form.Item>
            <Form.Item
              name="password"
              rules={[
                {
                  validator: async (rule, value) => {
                    validatePassWord(rule, value);
                  },
                },
              ]}
              help={password.errorMsg}
              validateStatus={password.validateStatus}
            >
              <Input
                prefix={<LockOutlined className="site-form-item-icon" />}
                type="password"
                placeholder="密码"
              />
            </Form.Item>
            <Form.Item>
              <Form.Item name="remember" valuePropName="checked" noStyle>
                <Checkbox>记住我</Checkbox>
              </Form.Item>
            </Form.Item>

            <Form.Item>
              <Button
                type="primary"
                htmlType="submit"
                className="login-form-button"
                disabled={disabledflag}
              >
                登陆
              </Button>
            </Form.Item>
          </Form>
        </div>
      </div>
    </div>
  );
}

export default withRouter(LogoIn);
